<div class="demand-report">
  <div class="ui-g ui-fluid" style="width: 50%;position: relative">
    <!--受培训单位-->
    <div class="ui-g-12 ui-md-12">
      <label class="ui-g-3 ui-md-3 label">
        <span>受培训单位：</span>
      </label>
      <div class="ui-g-9 ui-md-9 input inputButton">
        <button
          [pTooltip]="reportTableSelectName.split(',').join('\n')"
          pButton type="button" [label]="reportTableSelectName"
          class="ui-button-rounded"
          (click)="reportOperate(reportOperateFlag = 'strain')">
        </button>
      </div>
    </div>
    <!--日常培训类别-->
    <div class="ui-g-12 ui-md-12">
      <label class="ui-g-3 ui-md-3 label">
        <span>日常培训类别：</span>
      </label>
      <div class="ui-g-9 ui-md-9 input">
        <p-dropdown
          placeholder="请选择培训类别"
          [options]="reportDropdownOptions" [(ngModel)]="reportDropdownSelected"
          optionLabel="trainingTypeName" dropdownIcon="fa fa-caret-down">
        </p-dropdown>
      </div>
    </div>
    <!--培训内容-->
    <div class="ui-g-12 ui-md-12">
      <label class="ui-g-3 ui-md-3 label">
        <span>培训内容：</span>
      </label>
      <div class="ui-g-9 ui-md-9 input">
        <input
          type="text" pInputText placeholder="请填写培训内容"
          name="title" #title="ngModel"
          [(ngModel)]="reportOperateField.trainingContent">
       <!-- <div *ngIf="title.invalid && (title.dirty || title.touched)" class="text-danger mt-2">
          <div *ngIf="title.errors.required">
            请填写培训内容必须填写
          </div>
        </div>-->
      </div>
    </div>
    <!--培训时长-->
    <div class="ui-g-12 ui-md-12">
      <label class="ui-g-3 ui-md-3 label">
        <span>培训时长（学时）：</span>
      </label>
      <div class="ui-g-9 ui-md-9 input">
        <input
          type="text" pInputText name="duration"
          #duration="ngModel" placeholder="请填写培训时长"
          [(ngModel)]="reportOperateField.trainingDuration">
        <!--<div *ngIf="duration.invalid && (duration.dirty || duration.touched)" class="text-danger mt-2">
          <div *ngIf="duration.errors.required">
            培训时长必须填写
          </div>
        </div>-->
      </div>
    </div>
    <!--组织培训单位-->
    <div class="ui-g-12 ui-md-12">
      <label class="ui-g-3 ui-md-3 label">
        <span>组织培训单位：</span>
      </label>
      <div class="ui-g-9 ui-md-9 input orgButton">
        <button
          pButton type="button" [label]="reportOrgTreeSelect.label?reportOrgTreeSelect.label:'点击选择单位'"
          class="ui-button-white text-left" (click)="reportOperate(reportOperateFlag = 'tree')">
        </button>
      </div>
    </div>
    <!--开始时间-->
    <div class="ui-g-12 ui-md-12">
      <label class="ui-g-3 ui-md-3 label">
        <span>开始时间：</span>
      </label>
      <div class="ui-g-9 ui-md-9 input">
        <p-calendar
          #calendarStart
          placeholder="点击选择时间......"
          [locale]="reportEs" [(ngModel)]="reportOperateField.startTime"
          dateFormat="yy-mm-dd"
          dataType="string"
          [monthNavigator]="true"
          [yearNavigator]="true"
          [showTime]="true"
          yearRange="1949:2030">
          <p-footer>
            <button pButton type="button" label="确定" class="ui-button-warning" (click)="calendarStart.hideOverlay()"></button>
          </p-footer>
        </p-calendar>
      </div>
    </div>
    <!--结束时间-->
    <div class="ui-g-12 ui-md-12">
      <label class="ui-g-3 ui-md-3 label">
        <span>结束时间：</span>
      </label>
      <div class="ui-g-9 ui-md-9 input">
        <p-calendar
          #calendarEnd
          placeholder="点击选择时间......"
          [locale]="reportEs" [(ngModel)]="reportOperateField.endTime"
          dateFormat="yy-mm-dd"
          dataType="string"
          [monthNavigator]="true"
          [yearNavigator]="true"
          [showTime]="true"
          hourFormat="24"
          yearRange="1949:2030">
          <p-footer>
            <button pButton type="button" label="确定" class="ui-button-warning" (click)="calendarEnd.hideOverlay()"></button>
          </p-footer>
        </p-calendar>
      </div>
    </div>
    <!--提交-->
    <div class="ui-g-12 ui-md-12 text-center">
      <button pButton label="提交" style="width: auto" (click)="reportOperate('add')"></button>
    </div>
  </div>
  <!--数据弹窗-->
  <p-dialog
    [modal]="true"
    [(visible)]="reportOperateModal" [blockScroll]="true"
    [contentStyle]="{width: reportOperateFlag === 'strain'?'50vw':'30vw',height: '30vh'}">
    <p-header>{{reportOperateFlag === 'strain'?'请选择受训单位人员':'请选择组织培训单位'}}</p-header>
    <p-scrollPanel [style]="{width: '100%', height: '250px'}" *ngIf="reportOperateFlag === 'tree'">
      <p-tree
        [style]="{width: '100%'}"
        [value]="reportOrgTree"
        [(selection)]="reportOrgTreeSelect"
        selectionMode="single">
      </p-tree>
    </p-scrollPanel>
    <p-table
      *ngIf="reportOperateFlag === 'strain'"
      [(selection)]="reportTableSelect"
      [value]="reportTableData" [columns]="reportTableHeader"
      [scrollable]="true" scrollHeight="50vh" dataKey="id" [responsive]="true"
    >
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th style="width: 4em">
<!--            选择-->
            <!--<p-tableHeaderCheckbox></p-tableHeaderCheckbox>-->
            全选
            <p-checkbox #checkboxAll value="selectAll" [(ngModel)]="selectAllBox" (click)="selectAll(checkboxAll)"></p-checkbox>
          </th>
          <th *ngFor="let col of columns">
            {{col.header}}
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="caption">
        <button
          pButton class="ui-button-danger"
          [label]="reportOrgTreeSelect.label?reportOrgTreeSelect.label:'点击选择单位'"
          (click)="reportOrgTreeModal=true"
        >
        </button>
        <input
          type="text" pInputText placeholder="请输入工种关键字筛选数据..."
          [(ngModel)]="reportWorkType"
          (ngModelChange)="reportOperate('search', $event)"
          class="ml-3" style="width:26%">
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr>
          <td style="width: 4em;text-align: center">
            <p-checkbox #checkbox [value]="1" [(ngModel)]="selectBoxes[rowIndex]" (click)="select(checkbox, rowData)"></p-checkbox>
<!--            <p-tableCheckbox #checkbox [value]="rowData"  (click)="select(checkbox, rowData)"></p-tableCheckbox>-->
          </td>
          <td *ngFor="let col of columns" style="overflow: hidden;text-overflow: ellipsis;" [pTooltip]="rowData[col.field]">
            {{rowData[col.field]}}
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="summary">
        <app-pagination [option]="reportPageOption" (clickEvent)="reportPageEvent($event)"></app-pagination>
      </ng-template>
    </p-table>
    <p-footer>
      <button type="button" pButton icon="pi pi-check" (click)="reportOperate('select')" label="确定"></button>
    </p-footer>
  </p-dialog>
  <!--单独组织弹出A-->
  <p-dialog
    [modal]="true"
    [(visible)]="reportOrgTreeModal" [blockScroll]="true"
    [contentStyle]="{width: '30vw',height: '30vh'}">
    <p-header>请根据组织培训单位进行受训人员选择</p-header>
    <p-scrollPanel [style]="{width: '100%', height: '250px'}">
      <p-tree
        [style]="{width: '100%'}"
        [value]="reportOrgTree"
        [(selection)]="reportOrgTreeSelect"
        selectionMode="single">
      </p-tree>
    </p-scrollPanel>
    <p-footer>
      <button type="button" pButton (click)="reportOperate('search')" label="确定搜索"></button>
    </p-footer>
  </p-dialog>
</div>
